<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./missing.title";
import Form from "@/components/StorageForm/index";
import { useScanStore, useToastStore } from "@/store";
import { missingService } from "@/service/missing";
import { useMessage } from "wot-design-uni";
import Spin from "@/components/Spin/index.vue";
import Card from "@/components/Card/index.vue";

const { missing } = useScanStore();
const message = useMessage();
const toastStore = useToastStore();

const Basic = Form.MissingBasicForm;
const Goods = Form.MissingGoods;

const basicInfo = reactive({
	mainOrderNumber: "",
});

const processRemark = ref();

const loading = ref(false);

const currentId = ref();
const currentType = ref();

// 初始化
const initView = async () => {
	loading.value = true;
	try {
		const rs = await missingService.getDetail(currentId.value);
		if (rs) {
			basicInfo.mainOrderNumber = rs.mainOrderNumber;
			missing.setMain(rs.mainOrderNumber);
			missing.setBox(rs.totalQuantity);
			missing.setList(rs.goodsLackDetailRespList?.map((e) => e.boxNumber));

			processRemark.value = rs.processRemark;
		}
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};

// 返回
const handleBack = () => {
	missing.clear();
	uni.navigateBack();
};

// 确认
const handleConfirm = async () => {
	if (!processRemark.value) {
		// message.alert("处理说明不可为空");
		toastStore.set("处理说明不可为空", "error");
		return;
	}
	loading.value = true;
	try {
		const rs = await missingService.process({
			id: currentId.value,
			processRemark: processRemark.value,
		});
		if (rs) {
			// message.alert("处理缺件成功");
			toastStore.set("处理缺件成功", "success");
			setTimeout(() => {
				uni.reLaunch({ url: "/pages/index/index" });
				missing.clear();
			}, 1500);
		}
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};

const cusTitleConfig = reactive({ ...titleConfig });

onLoad((options) => {
	const { id, type } = options;
	if (!id || !type) {
		return;
	}
	currentId.value = id;
	currentType.value = type;
	initView();

	if (type === "deal") {
		cusTitleConfig.title = "缺件处理";
	}
});

onUnload(() => {
	missing.clear();
});
</script>

<template>
	<ViewContainer :title="cusTitleConfig" innerClass="missing-register-page">
		<Spin :loading="loading" full>
			<Basic type="show" v-model:data="basicInfo" showTitle />
			<div class="divider"></div>

			<Card class="deal-card">
				<template v-if="currentType === 'check'">
					<view class="flex">
						<view class="label">处理说明</view>
						<view class="text">{{ processRemark ?? "-" }}</view>
					</view>
				</template>
				<template v-else>
					<view class="flex">
						<view class="label">处理说明</view>
						<wd-textarea
							v-model="processRemark"
							placeholder="请填写处理说明"
							auto-height
						/>
					</view>
				</template>
			</Card>

			<div class="divider"></div>

			<Goods showTitle :boxNumber="missing.getBox()" type="show" />

			<template v-if="currentType === 'deal'">
				<view class="btn-group">
					<wd-button
						@click="handleBack"
						class="btn back"
						type="info"
						:round="false"
						>返回</wd-button
					>
					<wd-button @click="handleConfirm" class="btn confirm" :round="false"
						>确认</wd-button
					>
				</view>
			</template>
		</Spin>
	</ViewContainer>
</template>

<style lang="less" scoped>
.divider {
	width: 100%;
	height: 30px;
}

.btn-group {
	display: flex;
	justify-content: center;
	margin: 50px 0;

	.btn {
		width: 45%;
		height: 100px;
	}
}

.deal-card {
	padding: 30px;
	font-size: 40px;

	.label {
		white-space: nowrap;
	}

	.text {
		margin-left: 40px;
	}
}

:deep(.wd-textarea) {
	flex: 1;
	margin-left: 40px;

	.wd-textarea__inner {
		font-size: 40px;
		line-height: 60px;
	}
}
</style>
